<template>
	<div class="container">
		<img id="img-text" src="@/assets/text.png" style="display: none;"/>
		<img id="img-button" src="@/assets/button.png" style="display: none;"/>
		<div class="left-warp">
			<ul>
				<li id="text" draggable="true" @dragstart="dragstart($event)">元素A</li>
				<li id="button" draggable="true" @dragstart="dragstart($event)">元素B</li>
			</ul>
		</div>
		<div :class="dragLines?'lines':''" id="item-room" class="right-warp" @dragenter="dragenter($event)" @dragleave="dragleave($event)" @drop="drop($event)" @dragover.prevent>
			<ul>
				<li v-for="(item,index) in arrs">{{item.text}}</li>
			</ul>
		</div>
	</div>
</template>
<script type="text/javascript">
	let elemetnNode=""//最先进入的地方	
	export default{
		data(){
			return{
				arrs:[],
				dragLines:false
			}
		},
		mounted() {
		},
		methods:{
			/**
			 * 拖动开始前
			 * e $event 
			 */
			dragstart(e){
				this.dragLines=true
				e.dataTransfer.setData('id', e.target.id);
				
				let imageText = document.getElementById('img-text').cloneNode();
				let imageButton = document.getElementById('img-button').cloneNode();
				if(e.target.id=='text'){
					e.dataTransfer.setDragImage(imageText,150,150);
				}
				if(e.target.id=='button'){
					e.dataTransfer.setDragImage(imageButton,150,150);
				}
			},
			/**
			 * 放置目标
			 * @param {Object} e
			 */
			drop(e){
				// console.log('drop::',e);
				e.preventDefault()//阻止浏览器读取文件
				let id = e.dataTransfer.getData('id');
				if(id==='text'){
					this.arrs.push({text:'元素A'})
				}
				if(id==='button'){
					this.arrs.push({text:'元素B'})
				}
				this.dragLines=false
			},
			/**
			 * 进入目标区域时[待用]
			 * 默认区域内子目标都会出现进入，使用elemetnNode标记第一次进入的区域
			 * @param {Object} e
			 */
			dragenter(e){
				elemetnNode=e.target;
				console.log('drapenter')
			},
			/**
			 * 离开目标区域时[待用]
			 * 默认区域内子目标都会出现进入，使用elemetnNode标记第一次进入的区域
			 * @param {Object} e
			 */
			dragleave(e){
				if(elemetnNode===e.target){
					console.log('drapleave')
				}
			},
			
		}
	}
</script>
<style type="text/css" lang="scss" scoped>
	.container{
		height: 100%;
		display: flex;
		position: relative;
		.left-warp{
			height: 100%;
			width: 200px;
			background-color: #f9fcff;
			padding: 20px;
			ul li{
				background-color: #e1edff;
				margin-bottom: 10px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				cursor: move;
			}
		}
		.right-warp{
			width: 100%;
			background-color: #fff;
			padding: 20px;
			border: 1px dashed #fff;
			ul li{
				background-color: #e1edff;
				margin-bottom: 10px;
				height: 30px;
				line-height: 30px;
				text-align: center;
			}
		}
		.lines{
			border-color: #DD4A68;
		}
	}
</style>
